<template>
    <div>
        <div>
            <van-nav-bar title="菜品分类">
                <template #left >
                    <van-icon name="arrow-left" color="#000" size="20" @click="Goshouye"/>
                </template>
                <template #right>
                    <van-icon name="search" size="28" color="#000" />
                </template>
            </van-nav-bar>
        </div>
        <div class="box">
            <div class="box_left">
                <van-sidebar v-model="active" @click="changepage(active)">
                    <van-sidebar-item  title="热门食谱" />
                    <van-sidebar-item  title="意面" />
                    <van-sidebar-item title="主菜" />
                    <van-sidebar-item title="亚洲风味" />
                    <van-sidebar-item title="快手菜" />
                    <van-sidebar-item title="无肉也欢" />
                    <van-sidebar-item title="甜点" />
                </van-sidebar>
            </div>

            <div>
                <router-view></router-view>
            </div>

        </div>

    </div>
</template>

<script>
export default {
    data() {
        return {
            active: 0,
          
        }
    },
    mounted(){
     if(this.$route.path.indexOf('hotmeun')>0){
        this.active=0
     }else if(this.$route.path.indexOf('yimian')>0){
        this.active=1
     }
    },
    methods:{
        Goshouye(){
            this.$router.go(-1)
            
        },
        changepage(idx){
            if(idx==0){
                this.$router.replace('hotmeun')
            }else if(idx==1){
                this.$router.replace("yimian")
            }
        }
    }
}
</script>

<style>
.box_left{
    background-color: rgba(247, 247, 247, 1);
    height:650px;
}
.box {
    display: flex;
}

html {
    background-color: #fff;
}
</style>